<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Agentic AI Performance Dashboard 2025</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f5f7fa;
      color: #333;
      margin: 0;
      padding: 0;
    }
    header {
      background: #ffffff;
      padding: 1rem 1.5rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      position: sticky;
      top: 0;
    }
    h1 {
      margin: 0;
      font-size: 1.5rem;
    }
    .container {
      padding: 1.5rem;
      max-width: 960px;
      margin: auto;
    }
    .card {
      background: #fff;
      border-radius: 8px;
      padding: 1rem 1rem 2rem;
      margin-bottom: 2rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    canvas {
      max-width: 100%;
      height: 260px;
    }
    .note {
      font-size: 0.9rem;
      color: #555;
      margin-top: 0.5rem;
    }
    @media (prefers-color-scheme: dark) {
      body {
        background: #111;
        color: #eee;
      }
      header {
        background: #1e1e1e;
      }
      .card {
        background: #1b1b1b;
      }
    }
  </style>
  <!-- Chart.js via CDN (lightweight) -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <header>
    <h1>Agentic AI Performance Dashboard (Records processed: 5000)</h1>
  </header>
  <div class="container">
    <!-- Question 1 -->
    <div class="card">
      <h2>1. Agent Types with Highest Multimodal Capability Share</h2>
      <canvas id="agentChart"></canvas>
    </div>

    <!-- Question 2 -->
    <div class="card">
      <h2>2. Model Architectures with Highest Multimodal Capability Share</h2>
      <canvas id="archChart"></canvas>
    </div>

    <!-- Question 3 -->
    <div class="card">
      <h2>3. Task Categories with Highest Median Bias-Detection Score</h2>
      <canvas id="biasChart"></canvas>
      <p class="note">Bias-detection score: higher = fairer model behaviour</p>
    </div>
  </div>

  <script>
    // Data extracted from the provided dataset
    const agentLabels = ["Customer Service", "Research Assistant", "Content Creator"];
    const agentData = [7.84, 7.03, 7.03];

    const archLabels = ["Mixtral-8x7B", "InstructGPT", "Falcon-180B"];
    const archData = [12.43, 11.08, 10.95];

    const biasLabels = ["Creative Writing", "Problem Solving", "Learning & Adaptation"];
    const biasData = [0.782, 0.7806, 0.77795];

    function createBar(ctx, labels, data, suffix = "", decimals = 2) {
      return new Chart(ctx, {
        type: "bar",
        data: {
          labels: labels,
          datasets: [
            {
              data: data,
              backgroundColor: ["#50b5ff", "#7fc8ff", "#a8d8ff"],
              borderRadius: 4,
              barPercentage: 0.6,
            },
          ],
        },
        options: {
          scales: {
            y: {
              beginAtZero: true,
              ticks: {
                callback: (v) => v.toFixed(decimals) + suffix,
              },
            },
          },
          plugins: {
            legend: { display: false },
            tooltip: {
              callbacks: {
                label: (ctx) => ctx.raw.toFixed(decimals) + suffix,
              },
            },
          },
          responsive: true,
          maintainAspectRatio: false,
        },
      });
    }

    createBar(document.getElementById("agentChart"), agentLabels, agentData, "%");
    createBar(document.getElementById("archChart"), archLabels, archData, "%");
    createBar(document.getElementById("biasChart"), biasLabels, biasData, "", 3);
  </script>
</body>
</html> 